<!--
* description: 客户名称（含输入框含新增客户弹出窗）
* author: zxuan
* createdDate: 2019-11-8
-->
<template>
  <section class="crmCustNameAdd">
    <el-col :span="span">
      <lableName
        :style="span==12?'width:14%':''"
        :validrule="validrule"
        :curLabelName="curLabelName"
        :isShowLabel="isShowLabel"
        :isRequire="isRequire"
      ></lableName>
      <form >
        <el-input
          :placeholder="readonly ? '' : '请输入'"
          v-model="modelCode"
          :disabled="disabled"
          :readonly="readonly"
          size="small"
          @input="querySearch"
          @focus="showSearch"
          @clear="clearCode"
          clearable
          resize="none"
          @blur="sendCode1"
          :type="inputType"
        >
        <el-button slot="append" icon="el-icon-user-solid" class="crmCustButton" @click="getFocusCode"></el-button>
        </el-input>
        <div
          v-show="fastOtherShow && showFast"
          v-loading="isShowLoading"
          :element-loading-text="$store.state.app.loadingText"
          class="crm-custC-search-content"
        >

          <div
            v-for="(item, i) in fastSearchList"
            :key="i"
            @click="fastSelect(item)"
            class="crm-custC-search-list"
          >客户:{{item.custName}} 电话:{{item.phone}}</div>
        </div>
      </form>
      <!-- <el-input
        placeholder="请选择"
        v-model="modelText"
        :disabled="disabled"
        size="small"
        suffix-icon="el-icon-menu"
        @clear="clearCode"
        clearable
        @blur="sendCode"
      ></el-input>-->
      <!-- <el-button
        class="icon-button"
        style="position: absolute;
    top: 0px;
    right: 9px;margin:1px"
        @click="getFocusCode"
       icon="el-icon-user-solid"
      ></el-button> -->
      <!-- <el-button
        class="icon-button"
        style="position: absolute;top: 0;right:13px;top: 0px;"
        @click="addDialog"
        icon="el-icon-plus"
      ></el-button>-->
      <validateFormate :curLabelName="curLabelName"></validateFormate>
    </el-col>
    <custName
      :popupsVisible="curPopupsVisible"
      :codeField="codeField"
      :textField="textField"
      :comType="comType"
      :valueObject="curValueObject"
      :popupsKey="popupsKey"
      :code="modelCode"
      :text="modelText"
      :key="curPopupsKey"
      :isMul="isMul"
      @changeCode="getComponentCode1"
      ref="custname"
    ></custName>
    <custNameAdd
      :popupsVisible="addPopupsVisible"
      :codeField="codeField"
      :textField="textField"
      :comType="comType"
      :valueObject="curValueObject"
      :popupsKey="popupsKey+1"
      :key="curPopupsKey+1"
      @changeCode="getComponentCode1"
      :isMul="isMul"
      ref="CNadd"
    ></custNameAdd>
  </section>
</template>
<script>
import { searchInputMixins } from "@/components/mixins/searchInputMixins";
import { valueObjectMixins } from "@/components/mixins/valueObjectMixins";
import { crmApis } from "@/api/apiList/crm";
import { requestAPI } from "@/api/commonRequest";
// import lableName from "@/components/lableName";
import custName from "@/components/crm/crmEjectWindows/crmCustName/custName";
import custNameAdd from "@/components/crm/crmEjectWindows/crmCustNameAdd/custCustNameAdd";
// import validateFormate from "@/components/validateFormate";
export default {
  // 组件混入对象
  mixins: [searchInputMixins, valueObjectMixins],
  components: {
    custName,
    custNameAdd,
    lableName: () => import("@/components/lableName"), //标题溢出样式组件
    validateFormate: () => import("@/components/validateFormate") //校验提示样式组件
  },
  props: {
    isMul: { type: Boolean, default: false },
    showFast: { type: Boolean, default: true },
  },
  data() {
    return {
      apiConfig: crmApis.mdmDlrCustInfoQueryGetCustList, //专营店客户查询
      isShowLoading: false,
      fastOtherShow: false,
      fastSearchList: [],
      addPopupsVisible: false,
      curLabelName: this.labelName === "" ? "客户名称" : this.labelName
    };
  },
  methods: {
    // 重写显示时执行事件
    // 查询
    querySearch(val) {
      let that = this;
      that.fastOtherShow = true;
      that.isShowLoading = true;

      let queryObj = {
        type: "query",
        apiConfig: that.apiConfig,
        apiServices: [
          {
            apiQueryRow: ["custName","dlrCustNo", "phone", "genderCode","carLicenseNo","vin","carSeriesCn","carBrandName","smallCarTypeCn"]
          }
        ],
        variables: {
          dataInfo: {
            custName: val
          }
        }
      };
      var paramD = that.$getParams(queryObj);
      requestAPI(paramD).then(response => {
        if (response.result == "1") {
          let results = response.rows;
          if(val==that.modelCode){
            that.fastSearchList = results;
            this.isShowLoading = false;
          }
        } else {
          that.$crmcf.showMessages(
            that,
            "error",
            response.msg
          );
          this.isShowLoading = false;
        }
      });
    },
    onShow() {
      var parent = this.$utils.getHasFormFieldParentComponent(this);
      if (
        parent.formField &&
        parent.formField.custName &&
        parent.formField.custName !== ""
      ) {
        debugger
        //赋值
        this.curValueObject.custName = parent.formField.custName;
        this.curPopupsKey = this.codeField + this.$utils.generateId();
      } else {
        this.curValueObject.custName=''
        // this.$alert('请先选择品牌', '提示', {
        //   confirmButtonText: '确定',
        //   callback: action => {
        //     this.close()
        //   }
        // })
      }
    },
    addDialog() {
      this.$refs.CNadd.addPopupsVisible = true;
    },
    getFocusCode() {
      if(this.disabled){
        return;
      }
      this.curPopupsVisible = true;
      this.curPopupsKey = this.codeField + this.$utils.generateId();
    },
    //传递网格列数据
    getComponentCode1(
      code,
      text,
      codeField,
      comType,
      popupsKey,
      textField,
      otherField,
      selectData,
      isSend
    ) {
      this.getComponentCode(
        code,
        text,
        codeField,
        comType,
        popupsKey,
        textField,
        otherField,
        selectData,
        isSend
      );
      var parent = this.$utils.getHasFormFieldParentComponent(this);
      let results = selectData[0];
      for (let key in parent.formField) {
        if (results.hasOwnProperty(key)) {
          parent.formField[key] = results[key];
        }
      }
      this.$emit("emitCode", selectData[0]);
    },
    sendCode1() {
      let val = this.modelCode;
      let text = this.codeField;
      var that= this

      this.$emit("changeCode", val, text);
      this.$emit("changeblur", val);
      this.sendCode();
      // debugger
      setTimeout(()=>{
        if(that.fastOtherShow){
       that.fastOtherShow=!that.fastOtherShow
      }
      },250)
      this.$emit("sendChangeCode", val, text);
    },
    setInputWidth(span) {
      switch (span) {
        case 6:
          return "";
        case 12:
          return "width:85%;line-height: 38px;";
      }
    },
    fastSelect(item) {
      this.isShowLoading = false;
      // this.fastOtherShow = false;
      this.$emit("emitCode", item,this);
    },
    showSearch() {
      this.fastOtherShow = true;
      this.querySearch(this.modelCode);
    },
    clearCode(){
      var parent = this.$utils.getHasFormFieldParentComponent(this);
      parent.formField.custName=''
      this.modelCode=''
      this.modelText=''
    }
  }
};
</script>
<style>
.crm-custC-search-content {
  position: absolute;
  left: 34%;
  top: 34px;
  width: 259px;
  min-height: 90px;
  max-height: 160px;
  overflow: auto;
  -webkit-box-shadow: 0px 0px 2px 0px #bbb7b7ee;
  box-shadow: 0px 0px 2px 0px #bbb7b7ee;
  text-align: left;
  line-height: 28px;
  z-index: 999999;
  background: #fff;
  cursor: pointer;
}
.crm-custC-search-list {
  margin: 0;
  padding: 6px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.crmCustButton {
  min-width: 38px;
  border:none !important;
  color: #909399 !important;
}
.crmCustButton:hover,.crmCustButton:focus{
  border:none !important;
  color: #909399 !important;
}

</style>

